<template>
	<view class="container container1">
		<view>
			<view class="title">封面图(非必填)</view>
			<view class="bg-cls">
				<uni-file-picker v-model="imageValue" :sourceType="sourceType" fileMediatype="image" mode="grid"
					:image-styles="imageStyles" @select="select" :limit="1" return-type="object"
					@delete="deleteHandler" />
			</view>
		</view>
		<view class="title1">
			<view class="title">基础设置</view>
			<view class="bg-cls">
				<view class="controller-cls border-cls"> <input v-model="form.title" class="uni-input" type="text" focus
						placeholder="填写投票标题" maxlength="20" /></view>
				<view class="controller-cls"> <textarea v-model="form.explanation" @blur="bindTextAreaBlur"
						style="height:120px" placeholder="投票说明(非必填)" maxlength="150" /></view>
			</view>
		</view>
		<view class="title1">
			<view class="title">投票选项设置</view>
			<view class="bg-cls">
				<view v-for="(item,index) in form.items" :key="index" class="controller-cls">
					<view class="index-cls">{{index+1}}.</view>
					<uni-easyinput prefixIcon="minus-filled" maxlength="50" v-model="item.name"
						@iconClick="deleteItem(index)" placeholder="输入选项名称">
					</uni-easyinput>
				</view>

				<view v-if="form.items.length<6"><uni-icons type="plus-filled" size="30" color="#1296db"
						@click="addItemHandler"></uni-icons>
				</view>
			</view>
		</view>
		<view class="title1">
			<view class="title">投票规则时间设置</view>
			<view class="bg-cls">
				<uni-datetime-picker type="datetime" :border="false" :value="form.voteEndTime" @change="change" />
			</view>
		</view>
		<view class="toolbar-cls">
			<button size="default" type="default" style="color:#ffffff;backgroundColor:#1296db;borderColor:#1296db"
				hover-class="is-hover" @click="submitHandler">发起投票</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		toast,
		uploadPic,
		checkVoteEndTime,
		getStorageSync,
		setStorageSync,
		useRouter
	} from '@/utils/index.js'

	import {
		saveVote
	} from '@/api/vote.js'

	let currentUser = ref({})
	const imageValue = ref([])
	const single = ref("2021-04-3")
	const grid = ref('')
	const sourceType = ref(['album', 'camera'])
	const imageStyles = ref({
		width: document.body.clientWidth,
		height: 150
	})
	currentUser.value = getStorageSync("currentUser")
	if (!currentUser) {
		clearStorageSync()
		useRouter('/pages/login/login', 'reLaunch')
	}
	const form = ref({
		title: '',
		explanation: '',
		coverImage: '',
		voteEndTime: '',
		type: 1,
		userid: currentUser.value.id,
		items: []
	})

	// 获取上传状态
	const select = async (e) => {
		console.log('选择文件：', imageValue.value)
		const result = await uploadPic(e, {})
		console.log('uploadPic=result:', result)
		if (result.isSuccess) {
			form.value.coverImage = result.data.fileName
		}
	}
	const deleteHandler = (e) => {
		form.value.coverImage = ''
	}
	const change = (e) => {

		console.log('e:', e)
		form.value.voteEndTime = e;
	}
	const deleteItem = (index) => {
		form.value.items.splice(index, 1)
	}
	const itemChange = (e, index) => {
		console.log('e:', e)
		console.log('e:', index)
	}
	const addItemHandler = () => {
		var _list = form.value.items;
		_list.push({
			name: '',
			voteOption:_list.length+1
		});
		form.value.items = _list
	}
	const submitHandler = async () => {
		if (!form.value.title) {
			toast("投票标题不能为空")
			return
		}
		if (form.value.items.length < 2 || form.value.items.length > 6) {
			toast("选项不能小于2或大于6")
			return
		}
		for (let t = 0; t < form.value.items.length; t++) {
			if (!form.value.items[t].name) {
				toast(`第${t+1}项名称不能为空`)
				return;
			}
		}
		if (!form.value.voteEndTime) {
			toast("选票结束时间不能为空")
			return
		} else {
			let result = checkVoteEndTime(form.value.voteEndTime)
			if (!result.flag) {
				toast(result.msg)
			} else {
				console.log('form.value', form.value)
				const result = await saveVote(form.value)
				console.log('result:', result)
				if (result.flag) {
					setStorageSync("allListUpdate",true)
					useRouter("/pages/voteMyList/voteMyList", {}, 'redirectTo')
				}
			}
		}


	}
</script>

<style lang="less" scoped>
	.container1 {
		padding-bottom: 150rpx;
	}

	.toolbar-cls {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}

	.title {
		padding: 10px 0;
	}

	.title1 {
		margin-top: 10rpx;
	}

	.bg-cls {
		background: #fff;
		border-radius: 5px;
		padding: 30rpx;
		height: auto;
	}

	.border-cls {
		border-bottom: 1px solid #f4f5f7;
	}

	.controller-cls {
		min-height: 120rpx;
		display: flex;
		align-items: center;
		.index-cls{
			margin-right: 20rpx;
		}
		input {
			height: 60rpx;
			margin-bottom: 20rpx;
		}

		textarea {
			margin-top: 20rpx;
			width: 100%;
			height: 300rpx;
		}

	}
</style>